<template>
  <div class="chart-size"></div>
</template>
<script>
import echartsMixins from "@/components/echarts/echartsMixins";

export default {
  mixins: [echartsMixins],
  props: {
    info: {
      type: Object,
      default: function () {
        return {
          mapTitle: "",
          colorMax: "",
          titledata: [],
          customerNum: ""
        };
      },
    },
  },
  data() {
    return {
      titleData: [10],
      mapTitle: "china",
      customerNum: [{name: "西藏", value: 4}, {name: "新疆", value: 5}],
      backgroundColor: '#F7EED6'
    };
  },
  computed: {
    option: function () {
      return {
        backgroundColor: this.backgroundColor, //地图画布背景颜色  "#F7EED6"米黄色  "#efefef"灰色
        grid: {
          left: 130,
          top: 100,
          botton: 40,
          width: '0%',
          show: false
        },
        xAxis: [
          {
            show: false,
            position: 'top',
            type: 'value',
            boundaryGap: false,
            splitLine: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              color: this.backgroundColor,
            },
          },
        ],
        yAxis: [
          {
            show: false,
            type: 'category',
            data: this.titleData,
            triggerEvent: true,
            axisTick: {
              alignWithLabel: true,
            },
            axisLine: {
              show: true,
              lineStyle: {
                show: true,
                color: '#2ec7c9',
              },
            },
          },
        ],
        series: [
          {
            name: this.mapTitle, //上面的下钻用到seriesName绑定下一级，换name绑定
            type: 'map',
            map: this.mapTitle,
            roam: false,
            height: '130%',
            zoom: 0.75,
            z: 1,
            label: {
              //地图上的文本标签
              normal: {
                show: true,
                position: 'inside', //文本标签显示的位置
                textStyle: {
                  color: '#fff', //文本颜色
                  fontSize: 14,
                },
                formatter: '{b}\n{c}', //文本上显示的值  data:[{name: "地名", value: 数据}],  {b}表示label信息,{c}代表value
              },
              emphasis: {
                show: true,
                position: 'inside',
                textStyle: {
                  color: '#fff',
                  fontSize: 13,
                },
              },
            },
            itemStyle: {
              normal: {
                areaColor: '#5ab1ef', //地图块颜色#DCE2F1  浅蓝#2B91B7
                borderColor: '#EBEBE4', //#EBEBE4灰色
              },
              emphasis: {
                areaColor: 'rgb(254,153,78)', //s鼠标放上去，地图块高亮显示的颜色
              },
            },
            data: this.customerNum,
          },
        ],
        // 初始动画的时长，支持回调函数，可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果：
        animationDuration: 1000,
        animationEasing: 'cubicOut',
        // 数据更新动画的时长。
        animationDurationUpdate: 1000,
      };
    },
  },
};
</script>
<style scoped>
.chart-size {
  height: 100%;
  width: 100%;
}
</style>
